<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/cookie.js"></script>
    <script src="../js/ajax.js"></script>
    <script src="../js/api.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        li {
            list-style: none;
        }

        a {
            color: inherit;
            text-decoration: none;
        }

        .header {
            width: 1226px;
            margin: 0px auto;
            background: grey;
            line-height: 40px;
            color: #fff;
            font-size: 12px;

            & ul {
                display: flex;

                & li {
                    padding: 0 10px;
                }

                .site-nav-info {}
            }
        }

        .container {
            width: 1226px;
            margin: 50px auto;

            .grade-list {

                & table,
                & td,
                & th {
                    border: 1px solid #333;
                }

                & table {
                    width: 100%;
                    line-height: 45px;
                    text-align: center;
                    border-collapse: collapse;
                    font-size: 13px;
                }

            }
        }
    </style>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        li {
            list-style: none;
        }

        a {
            text-decoration: none;
            color: inherit;
        }

        .header {
            width: 1226px;
            margin: 0 auto;
            font-size: 13px;
            line-height: 50px;
            margin-bottom: 20px;
        }

        .header .list {
            display: flex;
        }

        .header .list li {
            padding: 0 10px;
        }

        .site-nav-user {
            display: none;
        }

        .d-block {
            display: block;
        }

        .d-none {
            display: none;
        }

        .shadow {
            width: 100%;
            height: 100%;
            position: fixed;
            left: 0;
            top: 0;
            background-color: rgba(0, 0, 0, 0.5);
            display: none;
        }

        .shadow .form {
            background-color: #f6f6f6;
            width: 250px;
            padding: 20px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

        .shadow .form .input-group {
            margin-bottom: 10px;
        }

        .shadow .form .input-group input {
            margin-left: 5px;
        }

        .shadow .form .input-group input:disabled {
            border: 0;
            color: #333;
        }

        /* 搜索 */

        .searchGrade {
            display: flex;
            margin-bottom: 10px;
            /* justify-content: space-between; */
        }

        .searchGrade>* {
            margin-right: 20px;
            line-height: 30px;
        }

        .searchGrade .searchBar {
            width: 300px;
            height: 29px;
            border: 1px solid #333;
            display: flex;
            overflow: hidden;
        }

        .searchGrade .searchBar .searchCon {
            border: none;
            outline: none;
            flex: 1;
            padding: 0;
            text-indent: 5px;
        }

        .searchGrade .searchBar .searchBtn {
            width: 60px;
            height: 30px;
            display: block;
            background-color: #999;
        }

        .searchGrade .orderColBar,
        .searchGrade .orderTypeBar {
            border: 1px dashed #999;
            padding: 0 20px;
        }

        .searchGrade label {
            margin-right: 10px;
        }

        .searchGrade select {
            height: 30px;
        }

        .searchGrade input[type="reset"] {
            height: 30px;
            width: 45px;
        }

        .pageBox {
            text-align: center;
            margin-top: 10px;
        }
    </style>
</head>

<body>
    <div class="header">
        <ul class="nav">
            <li>中国大陆</li>
            <li class="site-nav-sign">
                <a href="./login.html">亲，请登录</a>
                <a href="./login.html">免费注册</a>
            </li>
            <li class="site-nav-info">
                <a href="javascript:;" class="tips">欢迎,xxx</a>
                <a href="javascript:;" class="exit">退出</a>
            </li>
            <li>手机淘宝</li>
            <li>网页无障碍</li>
        </ul>
    </div>
    <div class="container">
        <!-- onsubmit="return false" 阻止表单默认提交 -->
        <form class="searchGrade" onsubmit="return false">
            <div class="searchBar">
                <input type="text" class="searchCon">
                <a href="javascript:;" class="searchBtn"></a>
            </div>
            <div class="orderColBar">
                <!-- 排序的列名  -->
                <label>默认<input type="radio" name="col" class="orderCol" value="id" checked=""></label>
                <label>语文<input type="radio" name="col" class="orderCol" value="chinese"></label>
                <label>数学<input type="radio" name="col" class="orderCol" value="math"></label>
                <label>英语<input type="radio" name="col" class="orderCol" value="english"></label>
                <label>总分<input type="radio" name="col" class="orderCol" value="total"></label>
            </div>
            <div class="orderTypeBar">
                <!-- 排序的方式  asc => 升序 desc => 降序-->
                <label>升序<input type="radio" name="type" class="orderType" value="asc" checked=""></label>
                <label>降序<input type="radio" name="type" class="orderType" value="desc"></label>
            </div>
            <div class="showNumSelect">
                <select class="showNum">
                    <option value="5" selected="">每页显示5条</option>
                    <option value="10">每页显示10条</option>
                    <option value="15">每页显示15条</option>
                    <option value="20">每页显示20条</option>
                </select>
            </div>
            <input type="reset" value="重置">
        </form>
        <div class="grade-list">
            <table>
                <thead>
                    <tr>
                        <th>编号</th>
                        <th>姓名</th>
                        <th>班级</th>
                        <th>语文</th>
                        <th>数学</th>
                        <th>英语</th>
                        <th>总分</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- <tr>
                        <td>1</td>
                        <td>张三</td>
                        <td>2308</td>
                        <td>55</td>
                        <td>66</td>
                        <td>77</td>
                        <td>198</td>
                        <td>
                            <a href="javascript:;">编辑</a>
                            <a href="javascript:;">删除</a>
                        </td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>张三</td>
                        <td>2308</td>
                        <td>55</td>
                        <td>66</td>
                        <td>77</td>
                        <td>198</td>
                        <td>
                            <a href="javascript:;">编辑</a>
                            <a href="javascript:;">删除</a>
                        </td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>张三</td>
                        <td>2308</td>
                        <td>55</td>
                        <td>66</td>
                        <td>77</td>
                        <td>198</td>
                        <td>
                            <a href="javascript:;">编辑</a>
                            <a href="javascript:;">删除</a>
                        </td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>张三</td>
                        <td>2308</td>
                        <td>55</td>
                        <td>66</td>
                        <td>77</td>
                        <td>198</td>
                        <td>
                            <a href="javascript:;">编辑</a>
                            <a href="javascript:;">删除</a>
                        </td>
                    </tr> -->
                </tbody>
                <!-- <tfoot></tfoot> -->
            </table>

        </div>
    </div>

    <div class="shadow">
        <form class="showGrade form" onsubmit="return false">
            <div class="input-group"><label for="">编号:</label><input type="text" name="id" disabled></div>
            <div class="input-group"><label for="">姓名:</label><input type="text" name="name" disabled></div>
            <div class="input-group"><label for="">班级:</label><input type="text" name="class" disabled></div>
            <div class="input-group"><label for="">语文:</label><input type="text" name="chinese"></div>
            <div class="input-group"><label for="">数学:</label><input type="text" name="math"></div>
            <div class="input-group"><label for="">英语:</label><input type="text" name="english"></div>
            <div class="input-group">
                <input type="button" class="save" value="保存">
                <input type="reset" class="cancel" value="取消">
            </div>
        </form>
    </div>
</body>

<script>
    var tbody = document.querySelector(".grade-list table tbody");

    var siteNavSign = document.querySelector(".site-nav-sign");
    var siteNavInfo = document.querySelector(".site-nav-info");

    var searchGrade = document.querySelector(".searchGrade");
    var showNumSel = document.querySelector(".showNum");
    var shadow = document.querySelector(".shadow");


    var showGrade = document.querySelector(".showGrade");

    var idInp = document.getElementsByName("id")[0];
    var nameInp = document.getElementsByName("name")[0];
    var classInp = document.getElementsByName("class")[0];
    var chineseInp = document.getElementsByName("chinese")[0];
    var mathInp = document.getElementsByName("math")[0];
    var englishInp = document.getElementsByName("english")[0];

    var cancel = document.querySelector(".cancel");
    var save = document.querySelector(".save");

    // 全局变量  => 记录搜索的参数
    var wd = ""; // 搜索关键词(默认查询所有)
    var col = "id";// 排序列名(默认按编号排序)
    var type = "asc"; // 排序方式(默认升序   desc:降序)
    var page = 1;  // 展示的页面(默认第一页)
    var size = 5;  // 每页展示多少条 


    // 判断用户是否登陆
    var lgc = getCookie("lgc");
    if (lgc) {
        var tips = document.querySelector(".site-nav-info .tips");
        var exit = document.querySelector(".site-nav-info .exit");

        tips.textContent = `欢迎您,${lgc}`;

        exit.onclick = function () {
            deleteCookie("lgc");
            location.reload(); // 退出刷新
        }

        siteNavSign.remove();
    } else {
        siteNavInfo.remove();
    }


    // 页面加载时 查询成绩 排序和分页
    loadGrade();


    searchGrade.onclick = function (e) {
        var e = e || window.event;
        var target = e.target;

        if (target.className == "searchBtn") {
            var searchConInp = target.previousElementSibling;
            wd = searchConInp.value;
            loadGrade();

        } else if (target.className == "orderCol") { // 单机单选 => 获取选中时的value值
            col = target.value;
            loadGrade();
        } else if (target.className == "orderType") { // 单机单选 => 获取选中时的value值
            type = target.value;
            loadGrade();
        } else if (target.type == "reset") {

            wd = ""; // 搜索关键词(默认查询所有)
            col = "id";// 排序列名(默认按编号排序)
            type = "asc"; // 排序方式(默认升序   desc:降序)
            page = 1;  // 展示的页面(默认第一页)
            size = 5;  // 每页展示多少条 
            loadGrade();

        }
    }

    showNumSel.onchange = function () {
        size = this.value;
        loadGrade();
    }


    // 事件委托 (编辑和删除)
    tbody.onclick = function (e) {
        e = e || window.event;
        var target = e.target;
        if (target.className == "delete") {
            var id = target.dataset.index;
            console.log(target, id);

            // 删除元素
            target.parentElement.parentElement.remove();

            /* var xhr = new XMLHttpRequest();

            xhr.open("get", "http://121.43.116.41/demo/php/deleteGradeById.php?id=" + id, true);

            xhr.send();

            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    var result = xhr.responseText;

                    result = JSON.parse(result);
                    console.log(result);

                    var { status, message } = result;
                    if (status) {
                        // alert("删除成功");

                        loadGrade();
                    } else {
                        alert(message);;
                    }
                }
            } */

            deleteGradeById({ id }).then(res => {
                var { status, message } = res;
                if (status) {
                    // alert("删除成功");

                    loadGrade();
                } else {
                    alert(message);;
                }
            }).catch(err => {
                throw err;
            })


        } else if (target.className == "edit") {
            shadow.style.display = "block";

            var id = target.dataset.index;

            var xhr = new XMLHttpRequest();

            xhr.open("get", " http://121.43.116.41/demo/php/searchGradeById.php?id=" + id, true);

            xhr.send();

            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    var result = xhr.responseText;

                    result = JSON.parse(result);
                    console.log(result);

                    var { status, message, data } = result;
                    if (status) {
                        var { id, name, class: _class, chinese, math, english } = data;

                        idInp.value = id;
                        nameInp.value = name;
                        classInp.value = _class;
                        chineseInp.value = chinese;
                        mathInp.value = math;
                        englishInp.value = english;
                    } else {
                        alert(message);;
                    }
                }
            }
        }
    }

    cancel.onclick = function () {
        shadow.style.display = "none";
    }

    save.onclick = function () {
        var id = idInp.value;
        var ch = chineseInp.value; // "0"
        var mh = mathInp.value;
        var eh = englishInp.value;



        if (id && ch && mh && eh) {
            // if(!isNaN(ch)&&ch >=0 &&ch<=100){

            // }else{

            // }


            var xhr = new XMLHttpRequest();

            xhr.open("post", "http://121.43.116.41/demo/php/updateGradeById.php", true);

            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            xhr.send(`id=${id}&ch=${ch}&mh=${mh}&eh=${eh}`);

            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    var result = xhr.responseText;

                    result = JSON.parse(result);
                    console.log(result);

                    var { status, message } = result;
                    if (status) {
                        // alert("更新成功");
                        shadow.style.display = "none";

                        // location.reload();  //刷新整个页面 
                        loadGrade();

                    } else {
                        alert(message);
                    }

                }
            }



        } else {

        }
    }



    function loadGrade() {
        /* ajax({
            type: "get",
            url: "http://121.43.116.41/demo/php/searchGradeOrderLimit.php",
            data: {
                wd: wd,
                col,
                type,
                page,
                size,
            },
            dataType: "json",
            success: function (res) {
                var { status, message, list } = res;

                if (status) {

                    var html = "";
                    list.forEach(({ id, name, class: _class, chinese, math, english }) => {
                        html += `<tr>
                            <td>${id}</td>
                            <td>${name}</td>
                            <td>${_class}</td>
                            <td>${chinese}</td>
                            <td>${math}</td>
                            <td>${english}</td>
                            <td>${chinese + math + english}</td>
                            <td>
                                <a href="javascript:;" class="edit" data-index="${id}">编辑</a>
                                <a href="javascript:;" class="delete" data-index="${id}">删除</a>
                            </td>
                        </tr>`
                    })
                    tbody.innerHTML = html;


                } else {
                    alert(message);
                }
            }
        }) */

        // var p = ajaxPromise({
        //     type: "get",
        //     url: "http://121.43.116.41/demo/php/searchGradeOrderLimit.php",
        //     data: {
        //         wd: wd,
        //         col,
        //         type,
        //         page,
        //         size,
        //     },
        //     dataType: "json",
        // })

        // p.then((res) => { }).catch((err) => { })


        ajaxPromise({
            type: "get",
            url: "http://121.43.116.41/demo/php/searchGradeOrderLimit.php",
            data: {
                wd: wd,
                col,
                type,
                page,
                size,
            },
            dataType: "json",
        }).then((res) => {
            var { status, message, list } = res;

            if (status) {

                var html = "";
                list.forEach(({ id, name, class: _class, chinese, math, english }) => {
                    html += `<tr>
                            <td>${id}</td>
                            <td>${name}</td>
                            <td>${_class}</td>
                            <td>${chinese}</td>
                            <td>${math}</td>
                            <td>${english}</td>
                            <td>${chinese + math + english}</td>
                            <td>
                                <a href="javascript:;" class="edit" data-index="${id}">编辑</a>
                                <a href="javascript:;" class="delete" data-index="${id}">删除</a>
                            </td>
                        </tr>`
                })
                tbody.innerHTML = html;


            } else {
                alert(message);
            }
        }).catch((err) => {
            // throw err;
        })
    }



</script>

</html>